<!-- 项目的根组件，template主要是放html元素的（html的页面结构的）-->
<template>
	<div>
		<!--1.0利用mint-ui中的header组件实现整个系统的头部-->
		<mt-header fixed title="Vue商城系统"></mt-header>
		<!--1.0.1 统一的返回按钮-->
		<div v-if="isshow" id="back">
			<a href="javascript:void(0)" @click="backto">返回</a>
		</div>
		<!--2.0路由占位，用于展示信息-->
		<router-view></router-view>
		<lg-preview></lg-preview>
		<!--3.0利用mui中的tabbar组件实现系统的头部-->
		<nav class="mui-bar mui-bar-tab">
			<router-link class="mui-tab-item " to="/home">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-chat">
				<span class="mui-icon mui-icon-email">
	
				</span>
				<span class="mui-tab-label">会员</span>
			</router-link>
			<router-link class="mui-tab-item" to="/shopcar/car">
				<span class="mui-icon mui-icon-contact">
					<span id="badge" class="mui-badge">0</span>
				</span>
				<span class="mui-tab-label">购物车</span>
			</router-link>
			<router-link class="mui-tab-item" to="/tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">搜索</span>
			</router-link>
		</nav>
	</div>
	<!--这里的div是一个根元素,2.0中要求所有元素都必须包在一个根元素中-->
</template>

<script>
import { vm, COUNTSTR } from './kits/vm.js';
//利用vm.$on()来注册COUNT这个常量代表的是事件
vm.$on(COUNTSTR, function (count) {
	//1.0将count值追加到购物车中
	var badgeobj = document.getElementById('badge');
	badgeobj.innerText = parseInt(badgeobj.innerText) + count;
})
export default { // 负责导出 .vue这个组件对象(它本质上是一个Vue对象,所以Vue中该定义的元素都可以使用)
	data() {  //es6语法，等价于 es5的 data:function(){}
		return {
			isshow: false
		}
	},
	watch: {
		'$route': function (newroute, oldroute) {
			if (newroute.path.toLowerCase() == '/home') {
				this.isshow = false;
			} else {
				this.isshow = true;
			}
		}
	},
	methods: {
		backto() {
			//利用路由对象中的go(-1)来实现返回到上一级页面(这个方法是vue-router的方法)
			this.$router.go(-1);
		}
	},
	created() {

	}
}
</script>

<!--写css文件，当前页面的css样式写到这里，其中scoped表示这个里面写的css代码只是在当前组件页面上有效，不会去影响到其他组件页面-->
<style scoped>
.lg-preview-wrapper[data-v-0fe605dc] {
	/*缩略图样式*/
	top: 0;
}

#back {
	width: 60px;
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 101;
}

#back a {
	color: white;
	font-size: 16px;
	font-weight: bold;
}
</style>

